<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
  <meta name="screen-orientation" content="portrait" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <title>Title</title>
  <!-- <script src="http://ptstatic.3k.com/component/liveURL-0.1.0.js"></script> -->
  <!-- 主文件 -->
<link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.10/dpl/antui.css"/>

<!-- 组件 -->
<link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.10/??dpl/widget/message.css,dpl/icon/message.css,dpl/widget/search.css"/>
<link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.10/dpl/widget/card.css">
<link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.10/dpl/widget/loading.css">
<link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.10/dpl/widget/article.css">
<style>
  .am-list .am-list-item {
    -webkit-background-size: 0 0,16px 1px,100% 1px,100% 1px;
    background-size: 0 0,16px 1px,100% 1px,100% 1px;
}


.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

/*路由切换动画——左移动*/
.left-enter {
    position: absolute;
    width: 100%;
    top: 0;
    left:0;
    z-index: 10000;

    transform: translateX(100%);
}

.left-enter.left-enter-active {

    transform: translateX(0);
    transition: all 0.4s ease-out;
}

.left-leave {
     position: absolute;
    width: 100%;
    top: 0;
    transform: translateX(0);
}

.left-leave.left-leave-active {
    transform: translateX(-100%);
    transition: all 0.4s ease-out;
}

/*路由切换动画——右移动*/
.right-enter {
    transform: translateX(-100%);
}

.right-enter.right-enter-active {
    transform: translateX(0);
    transition: all 0.4s ease-out;
}

.right-leave {
    position: absolute;
    width: 100%;
    top: 0;

    z-index: 10000;
    opacity: 1;
    transform: translateX(0);
}

.right-leave.right-leave-active {
    opacity: 1;
    transform: translateX(100%);
    transition: all 0.4s ease-out;
}



.box{
  display: -webkit-flex; 
  display: flex;
}
.box_v{
  flex-direction:column;
}


.animation-wrap>span{
  display: block;
  position: relative;
  width: 100%;
}


html body a.selected{

  font-weight: bold;
  color:red;
}


/*列表入场动画*/
.am-list-item{
 transition: all 0.4s ease-out;
}
.left-item-enter {
    z-index: 10000;
    transform: translateX(100%);
}

.left-item-enter.left-item-enter-active {

    transform: translateX(0);
    
}

.left-item-leave {
    opacity:1;
}

.left-item-leave.left-item-leave-active {
    opacity: 0;

}

.scrollFixed{
    position: fixed;
    left:0;
    top:50px;
    width: 100%;
    height: 95%;
    overflow: auto;
     -webkit-overflow-scrolling: touch;
}


</style>


</head>

<body>
  <div id="root"></div>
</body>
<!-- js -->
<script src="https://gw.alipayobjects.com/as/g/antui/antui/10.1.10/antui.js"></script>
</html>